<template>
  <div id="login">
    <div id="contain">
      <div id="left_card">
        <h1>亿达影城</h1>
        <span>Welcome to YiDa CINEMA</span>
      </div>
      <div id="right_card">
        <el-card class="el-card">
          <h2>欢迎登录</h2>
          <form class="login" @submit.prevent="login">
            <el-input v-model="employee.employeeName" placeholder="请输入用户名"></el-input>
            <el-input v-model="employee.password" placeholder="请输入密码" show-password></el-input>
          </form>
          <div class="message">
            <span v-html="error"></span>
          </div>
          <div id="btn">
            <button class="loginbtn" @click="login">登陆</button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const employee = ref({
  employeeName: '',
  password: ''
});

const error = ref('');

const login = () => {
  console.log(employee.value);
  //1.给后端发送登录请求,需要借助axios工具，注意：axios需要安装并导入！
  axios.post(BASE_URL+'/v1/employee/login',employee.value)
      .then((response)=>{
        //2.发送请求后，服务器处理完毕会给客户端响应结果，前端需要在回调函数中处理这个响应结果
        //response是响应对象,我们可以从响应对象response的data中得到后端服务器的响应数据
        //console.log(response);
        console.log(response.data);//后端返回的JsonResult
        console.log(response.data.data);//JsonResult的data,这里是employeeVO
        //3.根据后端的响应结果做前端处理
        if(response.data.code == 2000){
          ElMessage.success('登录成功!');
          //6.登录成功后,将employeeVO存入localStorage中
          /* localStorage只能存储字符串类型的键值对!!! */
          localStorage.setItem('employee',JSON.stringify(response.data.data));
          //4.登录成功后,跳转至HomeView,再重定向到用户列表页
          router.push('/');
        }else{
          ElMessage.error(response.data.msg);
          //5.登录失败,清空输入框
          employee.value = {employeeName: '', password: ''};
        }
      })
}
</script>

<style lang="less" scoped>
#login {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url(../../public/login_background1.gif);
  background-size: 100% 100%;
  background-color: #a7a8bd;
  #contain {
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    border: 1px solid black;
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    box-shadow: -5px -5px 10px rgb(39, 65, 65), 5px 5px 20px aqua;
    animation: animate 5s linear infinite;
  }
}

#contain {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  #left_card {
    width: 500px;
    h1 {
      color: white;
      white-space: nowrap;
    }
    span {
      font-size: 1.2rem;
      text-align: center;
      color: white;
      white-space: nowrap;
    }
  }
  #right_card {
    width: 400px;
    .el-card {
      margin: 0 45px;
      border-radius: 25px;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}

#right_card {
  display: flex;
  justify-content: center;
  align-items: center;
  h2 {
    margin-bottom: 5px;
  }
  .login {
    input {
      width: 80%;
      height: 45px;
      margin-top: 10px;
      border: 1px solid white;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      font-size: inherit;
      padding-left: 20px;
      outline: none;
    }
  }
  .remember {
    float: right;
    height: 26px;
    text-align: center;
    font-size: 1rem;
    position: relative;
    .radio {
      height: 1rem;
      width: 1rem;
      vertical-align: middle;
      margin-top: -2px;
      opacity: 0;
    }
    label {
      position: absolute;
      left: -2px;
      top: 5px;
      height: 1rem;
      width: 1rem;
      vertical-align: middle;
      margin-top: -2px;
      border-radius: 50%;
      border: 1px solid black;
    }
    input:checked + label::after {
      content: "";
      width: 0.6rem;
      height: 0.6rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: rgba(207, 38, 38, 0.8);
      border: 1px solid rgba(207, 38, 38, 0.8);
    }
  }
  .message {
    margin-top: 26px;
    font-size: 0.9rem;
    color: red;
  }
  .loginbtn {
    width: 100%;
    height: 35px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: rgba(207, 38, 38, 0.8);
  }
}
</style>